<table class="table table-bordered table-hover">
  <tr>
    <td>
      <p class="text-center"><b>Visits</b></p>
      <div id="visits_area" style="width:100%;height:160px;"></div>
    </td>
  </tr>
</table>

<script type="text/javascript">
    visits_area = Morris.Area({
	element: 'visits_area',
	xkey: 'raw',
	//data: data,
	ykeys: ['first_visits', 'repeat_visits'],
	labels: ['New Visitors', 'Returning Visitors'],
	ymax: 'auto',
	grid: true,
	eventStrokeWidth: 2,
	eventLineColors: ['#ccc', '#eee'],
	smooth: true,
	hideHover: 'auto',
	parseTime: false,
	lineWidth: 1,
	pointSize: 0,
	xLabelFormat: function(x) {return x.getFullYear() + '-' + x.getMonth() + '-' + x.getDate();},
	pointFillColors: ['#fff'],
	pointStrokeColors: ['#000']
    });
</script>
